<template>
  <div id="dashboard">
    <van-tabbar class="tabber" v-model="active" active-color="#75a342">
      <van-tabbar-item replace to="/dashboard/home">
        <span>首页</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? home_icon.active : home_icon.normal"
        />
      </van-tabbar-item>

      <van-tabbar-item replace to="/dashboard/category">
        <span>分类</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? category_icon.active : category_icon.normal"
        />
      </van-tabbar-item>

      <van-tabbar-item :info="goodsNum >0 ? goodsNum : ''" replace to="/dashboard/cart">
        <span>购物车</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? cart_icon.active : cart_icon.normal"
        />
      </van-tabbar-item>

      <van-tabbar-item replace to="/dashboard/mine">
        <span>我的</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? mine_icon.active : mine_icon.normal"
        />
      </van-tabbar-item>
    </van-tabbar>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>


<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { getGoodsCart } from "./../../service/api/index";
import { setStore } from "./../../config/global";


export default {
  name: "dashboard",
  data() {
    return {
      active: Number(sessionStorage.getItem("tabBarActiveIndex")) || 0,
      home_icon: {
        normal: require("@/images/tabbar/home_default.png"),
        active: require("@/images/tabbar/home_selected.png")
      },
      category_icon: {
        normal: require("@/images/tabbar/category_default.png"),
        active: require("@/images/tabbar/category_selected.png")
      },
      cart_icon: {
        normal: require("@/images/tabbar/shoppingcart_default.png"),
        active: require("@/images/tabbar/shoppingcart_selected.png")
      },
      mine_icon: {
        normal: require("@/images/tabbar/mine_default.png"),
        active: require("@/images/tabbar/mine_selected.png")
      }
    };
  },
  // 监视active属性值的改变
  watch: {
    active(value) {
      // console.log(value);
      // 定义要存的active值
      let tabBarActiveIndex = value > 0 ? value : 0;
      // 缓存到本地,浏览器不关闭都可以读取
      sessionStorage.setItem("tabBarActiveIndex", value);
    }
  },
  computed: {
    // vuex拿到的所有数据/状态
    ...mapState(["shopCart", "userInfo"]),
    goodsNum() {
      if (this.shopCart) {
        // 总的购物车商品数量
        let num = 0;
        Object.values(this.shopCart).forEach((goods, index) => {
          num += goods.num;
        });
        return num;
      } else {
        return 0;
      }
    }
  },
  mounted() {
    //1.自动登录
    this.reqUserInfo();
    // 2.获取购物车数据
    this.INIT_SHOP_CART();
  },
  methods: {
    ...mapMutations(["INIT_SHOP_CART"]),
    ...mapActions(["reqUserInfo"]),
    async initShopCart() {
      if (this.userInfo.token) {
        // 已登录
        // 1. 获取当前用户购物车中的商品
        let result = await getGoodsCart(this.userInfo.token);
        // console.log(result);

        // 2. 如果获取成功
        if (result.success_code === 200) {
          /*
            "ccccc" : {}  本地原有存储方式


            [   服务器返回存储方式
              {},
              {},
              {}
            ]
          */
          let cartArr = result.data;
          let shopCart = {};
          // 2.1 遍历   把服务器端内容转成 本地原有存储方式
          cartArr.forEach(value => {
            shopCart[value.good_id] = {
              num: value.num,
              id: value.goods_id,
              name: value.goods_name,
              small_image: value.small_image,
              price: value.goods_price,
              checked: true
            };
          });

          // 2.2 本地数据同步
          //2.2.1 先存储到本地
          setStore("shopCart", shopCart);
          //2.2.2 从本地取, 再同步到state
          this.INIT_SHOP_CART();
        }
      }
    }
  }
};
</script>


<style lang='less' scoped>
#dashboard {
  width: 100%;
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>